<template>
	<u-modal :show="data.show" title="签署关键字" :show-cancel-button="true" @cancel='close' @confirm="page.moduleSubmit">
		<view class="slot-content">
			<view class="search_add">
				<u-search :showAction="false" v-model='page.query.key_word' @search="page.searchPage"
					@clear="page.searchClear"></u-search>
				<view class="btn">
					<u-button type="primary" size="small" text="添加" :disabled="!page.query.key_word"
						@click="addKeyword"></u-button>
				</view>
			</view>
			<view class="">
				<scroll-view scroll-y="true" @scrolltolower="page.scrollToLower" style="widht:100%;height: 300rpx;">
					<u-radio-group v-model="data.changeVal">
						<view class="keyboard-list" v-for="(item,index) in page.list" :key="index">
							<u-radio @change='page.changeKeyword(item)' shape="circle" :value='item.key_word'
								:name='item.key_word' :label='item.key_word'>
							</u-radio>
						</view>
					</u-radio-group>
				</scroll-view>
			</view>
		</view>
	</u-modal>
</template>
<script setup>
	import {
		keywordList,
		userKeywordList,
		companyAddKeyWord,
		memberAddKeyWord
	} from "../api/module/contract";
	import {
		arrayAppend,
		msg,
		objClear
	} from "../utils/common";
	import {
		defineEmits,
		reactive,
		ref
	} from "vue";
	const emit = defineEmits(['return-keyword']);
	const data = reactive({
		changeVal: '',
		userType: 1,
		show: ref(false),
	});
	const page = reactive({
		list: [],
		query: {
			page: 1,
			key_word: '',
			isMore: false,
		},
		searchClear: () => {
			page.query.page = 1;
			page.query.key_word = '';
			page.queryList(true);
		},
		searchPage: () => {
			page.query.page = 1;
			page.queryList(true);
		},
		scrollToLower: () => {
			if (page.query.isMore) {
				page.value = page.value + 1
				page.queryList()
			}
		},
		changeKeyword: (item) => {
			data.changeVal = item.key_word;
		},
		queryList: (b = false) => {
			if (!data.show) {
				return;
			}
			if (b) {
				page.list = [];
			}
			switch (data.userType) {
				case 2:
					userKeywordList(page.query).then(res => {
						let arr = arrayAppend(res.data, {
							ischecked: false,
						});
						page.query.isMore = res.more;
						page.list = [...page.list, ...arr]
					})
					break;
				case 1:
					keywordList(page.query).then(res => {
						let arr = arrayAppend(res.data, {
							ischecked: false,
						});
						page.query.isMore = res.more;
						page.list = [...page.list, ...arr]
					})
					break;
			}
		},
		moduleSubmit: () => {
			if (!data.changeVal || data.changeVal.length < 1) {
				msg('请选择签署关键字');
				return;
			}
			console.log('关键字',data);
			emit('return-keyword', data.changeVal);
		}
	});
	const open = (userType) => {
		page.query.key_word = '';
		data.changeVal = '';
		data.show = true;
		data.userType = userType;
		page.queryList();
	}
	const close = () => {
		data.show = false;
		page.list = [];
		page.query = objClear(page.query);
	}
	const addKeyword = () => {
		
		if(data.userType == 2){
			companyAddKeyWord({
				key_word: page.query.key_word
			}).then(res => {
				page.query.key_word = ''
				page.queryList(true);
			})
		}else{
			memberAddKeyWord({
				key_word: page.query.key_word
			}).then(res => {
				page.query.key_word = ''
				page.queryList(true);
			})
		}
		
	}
	defineExpose({
		open,
		close
	});
</script>
<style scoped lang="scss" src="/static/css/contract/initiate.scss"></style>